<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">

      <el-form-item label="用工日期" prop="workingDate">
        <el-date-picker
          v-model="queryParams.workingDate"
          size="small"
          style="width: 200px"
          value-format="yyyy-MM-dd"
          type="date"
          range-separator="-"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" v-hasPermi="['job:employeeSalary:query']" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleDownload"
          v-hasPermi="['job:employeeSalary:export']"
        >导出薪资表</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="salaryList" :fit="true" @selection-change="changeFun">
      <el-table-column type="selection"  width="55" >
      </el-table-column>
      <el-table-column label="用工需求单" prop="workerNeedNo" min-width="50" align="center"/>
      <el-table-column label="用工日期" prop="workingDate"  :formatter="dateFormatter" :show-overflow-tooltip="true" min-width="30" align="center"/>
      <el-table-column label="用工人数" prop="demandQuantity" :show-overflow-tooltip="true" min-width="50" align="center"/>
      <el-table-column label="发放薪资（元）" prop="salaryTotal" align="center" />
      <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            v-hasPermi="['job:employeeSalary:detail']"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import {listEmployeeSalary,exportSalaryBills} from "@/api/job/employeeSalary/employeeSalaryApi";
    export default {
      name: "index.vue",
      created() {
        this.getList();
      },
      data(){
          return{
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            salaryList: [],
            // 日期范围
            dateRange: [],
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            //表格加载遮罩
            loading: true,
            // 导出遮罩层
            exportLoading: false,

            queryParams: {
              pageNum: 1,
              pageSize: 10,
              //用工日期
              workingDate: undefined,
            },
          };
      },
      methods: {
        getList() {
          this.loading = true;
          listEmployeeSalary(this.addDateRange(this.queryParams, this.dateRange)).then(
            response => {
              this.salaryList = response.rows;
              this.total = response.total;
              this.loading = false;
            }
          );
        },

        dateFormatter (row) {
          let datetime = row.workingDate;
          if(datetime){
            datetime = new Date(datetime);
            let y = datetime.getFullYear() + '-';
            let mon = datetime.getMonth()+1 + '-';
            let d = datetime.getDate();
            return y + mon + d;
          }
          return ''
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },

        changeFun(selection){
          this.ids = selection.map(item => item.id);
          this.single = selection.length !== 1;
          this.multiple = !selection.length;
        },

        handleView(row) {
          let id =row.id;

         let datetime = new Date(row.workingDate);
          let y = datetime.getFullYear() + '-';
          let mon = datetime.getMonth()+1;
          if(mon<10){
              mon = "0"+ mon+ '-';
          }else{
            mon = mon + '-';
          }

          let d = 0;
          if(datetime.getDate()<10){
            d = "0"+datetime.getDate() ;
          }else{
            d = datetime.getDate();
          }
          let workTime = y + mon + d;
          this.$router.push({path:"/finance/salary/employeeSalaryDetail",query:{salaryDailyId:id,workTime:workTime}});
        },

        handleDownload(){
         const ids = this.ids;
          if (ids.length < 1) {
            this.msgError("请选择需要导出的数据!");
            return;
          }
          this.$confirm('确认导出所选工资明细数据?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.exportLoading = true;
            return exportSalaryBills(ids);
          }).then(response => {
            this.download(response.msg);
            this.exportLoading = false;
          }).catch(() => {
          });
        },
      }
    }
</script>

<style scoped>

</style>
